<template>
  <div class="hidden-scrollbar">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="电影" @click-left="$router.push('/cities')" v-appeartopvm="166" fixed>
      <template #left>
        <div class="van-navbar-left">
          <span>{{ cityName }}</span><i class="iconfont icon-xia"></i>
        </div>
      </template>
    </van-nav-bar>
    <!-- 电影页面轮播图 -->
    <film-swiper :cityName="cityName"></film-swiper>
    <!-- 电影页面标签页 -->
    <van-tabs v-model="activeName" title-active-color="#ff5f16" border v-stickytop="46">
      <van-tab title="正在热映" to="/films/nowplaying" name="nowplaying" replace />
      <van-tab title="即将上映" to="/films/comingsoon" name="comingsoon" replace />
    </van-tabs>
    <!-- 正在热映、即将上映 -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import { Tab, Tabs, NavBar } from 'vant'
import { mapState } from 'vuex'
import FilmSwiper from './FilmSwiper.vue'
import { directiveMixins } from '@/mixins'

export default {
  name: 'FilmsView',
  mixins: [directiveMixins],
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [NavBar.name]: NavBar,
    FilmSwiper
  },
  data () {
    return {
      activeName: ''
    }
  },
  computed: {
    ...mapState('CityModule', ['cityName'])
  },
  methods: {
    getActiveName () {
      const routePath = this.$route.path
      if (routePath.includes('nowplaying')) this.activeName = 'nowplaying'
      else if (routePath.includes('comingsoon')) this.activeName = 'comingsoon'
      else this.activeName = ''
    }
  },
  mounted () {
    this.getActiveName()
  }
}
</script>

<style lang="scss" scoped>
</style>
